<template>
  <el-breadcrumb :separator="separator">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
      {{ item.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  name: "FeBreadcrumb",
  props: {
    separator: {
      type: String,
      default: "/"
    },
    breadcrumb: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      breadcrumbList: this.breadcrumb
    };
  },
  created() {
    this.getBreadcrumb();
  },
  methods: {
    getBreadcrumb() {
      if (this.breadcrumb.length === 0) {
        this.breadcrumbList = [];
        this.$route.matched.forEach(item => {
          this.breadcrumbList.push({
            path: item.path,
            name: item.meta ? item.meta.title : ""
          });
        });
      }
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  }
};
</script>

<style scoped></style>
